import { ActionContext } from "vuex"
import { RootState } from "../index"
import { getMenuListApi } from "@/api/menu/menu"
import { RouteRecordRaw } from "vue-router"
import Layout from '@/layout/index.vue'
import Center from '@/layout/center/center.vue'

import { menuList } from '@/api/mock/menu'

const modules = import.meta.glob('../../views/**/*.vue')

export type MenuState = {
    count: number,
    collapse: boolean,
    menuList: any
}

// 定义state
export const state: MenuState = {
    count: 0,
    collapse: false,
    menuList: [
        {
            path: '/dashboard',
            component: 'Layout',
            meta: {
              title: '首页',
              icon: 'HomeFilled',
              roles: ['sys:manage']
            },
            children: []
        }
    ]
}

// 定义mutations
export const mutations = {
    setCount(state: MenuState, count111: number) {
        state.count = count111
    },
    // 设置collapse
    setCollapse: (state: MenuState, collapse: boolean) => {
        state.collapse = collapse
    },
    // 设置菜单menuList
    setMenuList: (state: MenuState, menuList:Array<RouteRecordRaw>) => {
        state.menuList = state.menuList.concat(menuList)
    }
}

// 定义actions  有接口的情况
export const actions = {
    getMenuList({commit}:ActionContext<MenuState,RootState>,router: any) {
        return new Promise((resolve,reject) => {
            getMenuListApi().then(res => {
                let accessedRoutes
                if(res.code === 200) {
                    // 动态生成路由  router：前端路由     res.data:后端路由
                    accessedRoutes = filterAsyncRouter(res.data,router)
                    // console.log(accessedRoutes) // 后端生成的4个路由
                    // 设置到menuList
                    commit('setMenuList', accessedRoutes)
                }
                // 返回
                resolve(accessedRoutes)
            }).catch(err => {
                reject(err)
            })
        })
    }
}

// 定义actions  无接口的情况
export const actions111 = {
    getMenuList({commit}:ActionContext<MenuState,RootState>,router: any) {
        return new Promise((resolve,reject) => {
            // getMenuListApi().then(res => {
            //     let accessedRoutes
            //     if(res.code === 200) {
            //         // 动态生成路由  router：前端路由     res.data:后端路由
            //         accessedRoutes = filterAsyncRouter(res.data,router)
            //         // console.log(accessedRoutes) // 后端生成的4个路由
            //         // 设置到menuList
            //         commit('setMenuList', accessedRoutes)
            //     }
            //     // 返回
            //     resolve(accessedRoutes)
            // }).catch(err => {
            //     reject(err)
            // })
            let accessedRoutes
            accessedRoutes = filterAsyncRouter(menuList.data as any, router)
            commit('setMenuList', accessedRoutes)
            resolve(accessedRoutes)
        })
    }
}

// res.data/routes:后端路由   router：前端路由
export function filterAsyncRouter(routes:RouteRecordRaw[],router:any) {
    const res : Array<RouteRecordRaw> = []
    routes.forEach((route: any) => {
        const temp = {...route}
        const component = temp.component
        if(route.component) {
            if(component === 'Layout') {
                temp.component = Layout // 父级
            } else {
                temp.component = modules[`../../views${component}.vue`] // 子级
            }
        }
        if(temp.children){
            // 如果有下级且component!==Layout 专门处理3级的
            if(route.component !== 'Layout') {
                temp.component = Center
            }
            // 如果temp中还存在children，则要做递归处理
            temp.children = filterAsyncRouter(temp.children,router)
        }
        router.addRoute(temp)
        // console.log(temp)
        res.push(temp)
    })
    return res
}

// 定义getters
export const getters = {
    getCount(state: MenuState) {
        return state.count
    },
    // 获取collapse
    getCollapse: (state: MenuState) => {
        return state.collapse
    },
    getMenuList: (state: MenuState) => {
        return state.menuList
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}